<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" >
body{ margin:0; padding:0;}
.dialog { width: 300px; height: 200px; position:fixed; left:50%;top:50%; margin-top:-100px; margin-left:-150px; z-index: 30;box-shadow: 2px 2px 4px #ccc; background-color: #f1f1f1; border: solid 1px #aaa; border-radius: 4px; overflow: hidden; display: none; }
.dialog .title { font-size: 16px; font-weight: bold; color: #fff; padding: 6px; background-color: #404040; }
.dialog .close { width: 20px; height: 20px; margin: 3px; float: right; cursor: pointer; color: #fff; }
.pageCover { width: 100%; height: 100%; position: absolute; z-index: 10; background-color: #666; opacity: 0.5; display: none; }
</style> 
<meta charset="utf-8">
</head>
<body>
<div id="pageCover" class="pageCover"></div>
<input type="button" value="打开对话框" onclick="openDialog();"/>
<div id="dlgTest" class="dialog"><span class="close">&times;</span>
    <div class="title">对话框标题栏</div>
    <div class="content">对话框内容框</div>
</div>
<script type="text/javascript">
function Dialog(id){
	this.id=id;
	this.close_handler=null;
	var that=this;
	document.getElementById(id).children[0].onclick=function(){
		that.close();
		if(typeof that.close_handler=='function'){
			that.close_handler();
		}
	}
}
Dialog.prototype.show=function(){
    var dlg=document.getElementById(this.id);
    dlg.style.display='block';
    dlg=null;
}
Dialog.prototype.close=function(){
    var dlg=document.getElementById(this.id);
    dlg.style.display='none';
	dlg=null;
}
function openDialog(){
	document.getElementById('pageCover').style.display='block';	
	var dlg=new Dialog('dlgTest');
	dlg.show();
	dlg.close_handler=function(){
		document.getElementById('pageCover').style.display='none';
	}
}
</script>
</body>
</html>